<script setup lang="ts">
import { useTheme } from "@/composables/useTheme";
import { onHide, onLoad, onReady, onShow, onUnload } from "@dcloudio/uni-app";
import { getListPc } from "@/api/pcApi";
import Cache from "@/utils/cache";
import { USER_INFO } from "@/config/cache";
import { checkLogin, toLogin } from "@/libs/login";
import { JumpPath, timeFormat, Tips } from "@/utils";

import themeList from "@/utils/theme";
// websocket 通讯
let websocketUtil = inject("websocketUtil");
const { colorStyle } = useTheme();
onUnload(() => {
  // 移除事件监听
  uni.$off("marketUpdate");
});
onHide(() => {
  // 移除事件监听
  uni.$off("marketUpdate");
});
let business_id = ref(0);
onLoad((option) => {
  if (option.business_id) {
    business_id.value = option.business_id;
    // 轮询请求行情
    getDataHandler();
    // getListPcHandler(); //接口测试
  }
});
let userInfo = reactive({});
let timer = ref(null);
let currentTime = ref("");
onShow(() => {
  if (Cache.get(USER_INFO)) {
    userInfo = JSON.parse(Cache.get(USER_INFO));
  }
  // 监听行情更新事件
  uni.$on("marketUpdate", (data) => {
    setData(data);
    console.log(data, "监听行情更新事件");

    // 更新页面数据
  });
  //   getData();
});
async function getListPcHandler() {
  let params = { business_id: business_id.value };
  let res = await getListPc(params);
  const { marketList } = res.data;
  tableData.value = marketList.gold_list;
}
onReady(() => {});
function getDataHandler() {
  getCurrentTime();
  let params = {
    business_id: business_id.value,
    is_type: "pc",
    message: JSON.stringify("金价请求"),
  };
  websocketUtil.sendMsg(params);
  clearInterval(timer.value);
  timer.value = setInterval(() => {
    getDataHandler();
  }, 1000);
}
// 设置主题样式
function setThemeHandler(themeValue, subThemeValue = "golden") {
  // 合并默认主题
  const mergedTheme =
    themeList["theme"][themeValue] + themeList["sub_theme"][subThemeValue];
  uni.setStorageSync("viewColor", mergedTheme);
  uni.setStorageSync("themeValue", themeValue);
  // 更新响应式变量以触发页面样式更新
  colorStyle.value = mergedTheme;
}

let tableData = ref([]);
let contacts = ref([]);
let enterprise_address = ref(""); //联系地址
let is_business_status = ref(true); //是否营业
let logoImg = ref("");
let high_low_show = ref(true); //是否显示"高低"列
let enterprise_name = ref(""); //企业名称
async function setData(data) {
  // getCurrentTime();
  let res = data;
  uni.hideLoading();
  const { busione, marketList } = res.data;
  const list = marketList && marketList.gold_list;
  if (list) tableData.value = list;

  if (!busione) return;
  // 设置标题
  if (busione.enterprise_name) {
    uni.setNavigationBarTitle({ title: busione.enterprise_name });
    enterprise_name.value = busione.enterprise_name;
  }

  // 公告(防止重新渲染noticeList.value[0] != busione.notice_content)
  if (busione.notice_content && noticeList.value[0] != busione.notice_content) {
    noticeList.value = [busione.notice_content];
  }
  isHorizontal.value = busione.pc_show_size;
  is_business_status.value = !!busione.is_business_status;
  high_low_show.value = !!busione.high_low_show;
  logoImg.value = busione.logo;
  contacts.value = busione.contacts;
  enterprise_address.value = busione.enterprise_address;
  isDark.value = busione.theme === "dark";
  setThemeHandler(busione.theme, busione.theme_colour);
}

function getCurrentTime() {
  currentTime.value = timeFormat(new Date(), "yyyy-mm-dd hh:MM:ss");
}
let marketList = ref([]);
let isHorizontal = ref(1); //1横屏 2竖屏

let noticeList = ref([]);
function makePhone(phone) {
  uni.makePhoneCall({
    phoneNumber: phone, //仅为示例
    fail: (err) => {
      console.log(err, "----");
    },
  });
}

let enterprise_id = ref("");
function submitHandler() {
  business_id.value = enterprise_id.value;
  getDataHandler();
}
let isDark = ref(false);
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="wrap_in" v-if="business_id">
      <view class="header flex_sb">
        <view class="logo_box">
          <text v-if="enterprise_name">{{ enterprise_name }}</text>
          <!-- <image :src="logoImg" mode="widthFix" v-if="logoImg" />
        <image src="@/static/image/logo.png" mode="widthFix" v-else /> -->
        </view>
        <view class="right_box flex_s">
          <view
            class="notice_box flex_s"
            v-if="noticeList.length && isHorizontal == 1"
          >
            <view class="iconfont icon-laba icon_box"></view>
            <view class="swiper_box">
              <next-notice-bar :row="1" :speed="30" :list="noticeList">
                <template #default="{ row }">
                  <view class="notice-bar-item">
                    <rich-text :nodes="row"></rich-text>
                  </view>
                </template>
              </next-notice-bar>
            </view>
          </view>
          <view class="time_box flex_s">
            {{ currentTime }}
            <view class="status_box pad10" v-if="is_business_status">开盘</view>
            <view class="status_box pad10 close_status" v-else>闭盘</view>
          </view>
        </view>
      </view>
      <view class="notice_box flex_s" v-if="isHorizontal == 2">
        <view class="iconfont icon-laba icon_box"></view>
        <view class="swiper_box">
          <next-notice-bar :row="1" :speed="30" :list="noticeList">
            <template #default="{ row }">
              <view class="notice-bar-item">
                <rich-text :nodes="row"></rich-text>
              </view>
            </template>
          </next-notice-bar>
        </view>
      </view>
      <view class="container">
        <view
          class="tabale_item"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <view class="tabale_title" v-if="+item.is_show">
            {{ item.title }}
          </view>
          <view class="table_box" :class="{ hidde_title: !+item.is_show }">
            <uni-table ref="table" stripe emptyText="暂无更多数据">
              <uni-tr v-if="index == 0">
                <uni-th style="width: 25%" align="center">
                  <view class="table_th"> 商品 </view>
                </uni-th>
                <uni-th style="width: 25%" align="center">
                  <view class="table_th"> 回购 </view>
                </uni-th>
                <uni-th style="width: 25%" align="center">
                  <view class="table_th"> 销售 </view>
                </uni-th>
                <uni-th style="width: 25%" align="center" v-if="high_low_show">
                  <view class="table_th"> 高低 </view>
                </uni-th>
              </uni-tr>
              <template v-else>
                <uni-tr v-show="+item.is_show">
                  <uni-th style="width: 25%" align="center">
                    <view class="table_th"> 商品 </view>
                  </uni-th>
                  <uni-th style="width: 25%" align="center">
                    <view class="table_th"> 回购 </view>
                  </uni-th>
                  <uni-th style="width: 25%" align="center">
                    <view class="table_th"> 销售 </view>
                  </uni-th>
                  <uni-th
                    style="width: 25%"
                    align="center"
                    v-if="high_low_show"
                  >
                    <view class="table_th"> 高低 </view>
                  </uni-th>
                </uni-tr>
              </template>

              <uni-tr
                v-for="(_item, _index) in item.list"
                :key="_index"
                :class="[
                  { th1: _item.row_jwo_class == 1 },
                  { th2: _item.row_jwo_class == 0 },
                ]"
              >
                <uni-td align="center">
                  <view class="table_td no_blod">{{ _item.code_name }}</view>
                </uni-td>
                <uni-td align="center">
                  <view
                    class="table_td"
                    :class="[
                      { colorRed: _item.colour_bidprice == 1 },
                      { colorGreen: _item.colour_bidprice == 2 },
                      {
                        colorGreenLight: isDark,
                      },
                    ]"
                  >
                    {{ _item.bidprice || "--" }}
                  </view>
                </uni-td>
                <uni-td align="center">
                  <view
                    class="table_td"
                    :class="[
                      { colorRed: _item.colour_askprice == 1 },
                      { colorGreen: _item.colour_askprice == 2 },
                      {
                        colorGreenLight: isDark,
                      },
                    ]"
                  >
                    {{ _item.askprice }}
                  </view>
                </uni-td>
                <uni-td align="center" v-if="high_low_show">
                  <view class="table_td font_samll">
                    <view class="colorRed">
                      {{ _item.high || "--" }}
                    </view>
                    <view
                      class="colorGreen"
                      :class="{
                        colorGreenLight: isDark,
                      }"
                    >
                      {{ _item.low || "--" }}
                    </view>
                  </view>
                </uni-td>
              </uni-tr>
            </uni-table>
          </view>
        </view>
      </view>
      <view class="footer flex_s" :class="{ no_flex: isHorizontal == 2 }">
        <template v-if="contacts.length">
          <view
            class="text_item"
            v-for="(item, index) in contacts"
            :key="index"
            @click="makePhone(item.phone)"
          >
            <text class="iconfont icon-dianhua"></text>
            <text>{{ item.name }} {{ item.phone }}</text>
          </view>
        </template>

        <view class="text_item" v-if="enterprise_address">
          <text class="iconfont icon-dizhi"></text>
          <text>{{ enterprise_address }}</text>
        </view>
      </view>
    </view>
    <view class="body_box flex_fc" v-else>
      <view class="title_box"> 请输入企业ID </view>
      <view class="content flex_s">
        <view class="input_box">
          <input
            type="number"
            placeholder="例如:1 或 2"
            v-model="enterprise_id"
          />
        </view>
        <view class="btn_box" @click="submitHandler">访问</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
::v-deep .uni-table {
  min-width: auto !important;
  // 改表头字体样式
  .uni-table-th {
    border: none;
    border-right: 1px solid var(--view-td-right);
    background: var(--view-th1-color);
    font-size: 34rpx;
    font-weight: normal;
    color: var(--view-th-font-color);
  }
  .table--border {
    border: none;
  }
  .uni-table-td {
    border: none;
    border-right: 1px solid var(--view-td-right);
  }
  .uni-table-tr:first-child {
    height: 110rpx;
  }
  .uni-table-tr {
    // height: 160rpx;
  }
  .uni-table-tr:nth-child(2n + 2),
  .uni-table-tr:nth-child(2n + 2):hover {
    background: var(--view-th2-color);
  }
  .uni-table-tr:nth-child(2n + 3),
  .uni-table-tr:nth-child(2n + 3):hover {
    background: var(--view-th3-color);
  }
}
.wrap {
  min-width: 375px !important;

  min-height: 100vh;
  background: var(--view-linear-home-bg);
  position: relative;
  .wrap_in {
    padding: 60rpx 50rpx 100rpx;
  }
  .body_box {
    padding: 0 30rpx;
    min-height: 100vh;
    width: 100vw;
    .title_box {
      margin-bottom: 30rpx;
      font-size: 50rpx;
      text-align: center;
      color: var(--view-tabale-title);
    }
    .content {
      font-size: 40rpx;
      .input_box {
        flex: 1;
        border-radius: 10rpx;
        padding: 24rpx 20rpx;
        background: #fff;
      }
      .btn_box {
        padding: 20rpx;
        background: rgb(60, 156, 255);
        color: #fff;
        border-radius: 10rpx;
        margin-left: 30rpx;
      }
    }
  }
  .no_flex {
    display: block;
  }
  .footer {
    margin-top: 50rpx;
    font-size: 28rpx;
    color: var(--view-tabale-title);
    flex-wrap: wrap;
    .text_item {
      margin-right: 50rpx;
      margin-bottom: 30rpx;
      .iconfont {
        font-size: 30rpx;
        margin-right: 10rpx;
      }
    }
  }
  .notice_box {
    flex-wrap: nowrap;
    // max-width: 1500rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 10rpx;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    margin: 20rpx auto;
    padding: 0rpx 24rpx;
    // border: 1px solid rgba(255, 255, 255, 1);
    .icon_box {
      // float: left;
      margin-right: 10rpx;
      font-size: 28rpx;
      color: var(--view-theme);
    }

    .swiper_box {
      // float: right;
      flex: 1;
      height: 100%;
      width: auto;
      color: var(--view-tabale-title);
    }
  }
  .header {
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    margin-bottom: 50rpx;
    .right_box {
      flex-wrap: wrap;
      .notice_box {
        // max-width: 1500rpx;
        width: 752rpx;
      }
    }

    .logo_box {
      flex-shrink: 0;
      // width: 260rpx;
      font-size: 60rpx;
      font-weight: 600;
      color: var(--view-tabale-title);
      image {
        width: 100%;
      }
    }
    .time_box {
      color: var(--view-screen-color);
      // background: var(--view-time-bg);
      flex-shrink: 0;
      z-index: 20;
      font-size: 24rpx;
      padding: 10rpx 20rpx;
      .status_box {
        margin-left: 20rpx;
        color: #fff;
        border-radius: 10rpx;
        background: #d43030;
        border: 1px solid var(--view-border-color);
      }
      .close_status {
        background: #1d8c29;
      }
      .gray {
        background: #96999d;
      }
    }
  }
  .container {
    position: relative;
    .table_box {
      margin: 0 auto;
      border: 2px solid var(--view-tabale-border);
      border-radius: 16px;
      margin-bottom: 50rpx;
      // background: rgba(255, 255, 255, 0.45);
      overflow: hidden;
      .table_td {
        text-align: center;
        font-size: 36rpx;
        line-height: 50rpx;
        color: var(--view-tabale-title);
      }
    }
    .hidde_title {
      margin-bottom: 0;
      border: none;
      border-radius: unset;
      .th1 {
        background: var(--view-th3-color) !important;
      }
      .th2 {
        background: var(--view-th2-color) !important;
      }
      .name_td,
      .table_td {
        padding: 0;
        min-width: 180rpx;
      }
      ::v-deep .uni-table-td {
        padding: 10rpx 0;
      }
    }
    .tabale_item {
      &:first-child .hidde_title {
        border-radius: 16rpx 16rpx 0 0;
      }
      &:last-child .hidde_title {
        border-radius: 0 0 16rpx 16rpx;
      }
    }
    .tabale_title {
      color: var(--view-tabale-title);
      text-align: center;
      font-family: Source Han Serif CN;
      font-size: 34rpx;
      line-height: 43rpx;
      letter-spacing: 10rpx;
      text-align: center;
      margin-bottom: 20rpx;
      font-weight: bold;
    }
  }
}
</style>
